Highcharts একটি অত্যন্ত ফ্লেক্সিবল এবং কাস্টমাইজেবল চার্ট লাইব্রেরি, যার মাধ্যমে আপনি আপনার প্রজেক্টের প্রয়োজন অনুযায়ী কাস্টম চার্ট তৈরি করতে পারেন। Highcharts এর সাহায্যে আপনি বিভিন্ন ধরনের ডেটা ভিজ্যুয়ালাইজেশন, চার্ট কাস্টমাইজেশন, এবং ইন্টারঅ্যাকটিভ ফিচার তৈরি করতে পারেন।

এখানে কাস্টম চার্ট তৈরি করার প্রক্রিয়া এবং এর বিভিন্ন কাস্টমাইজেশন টেকনিক নিয়ে আলোচনা করা হলো।

1. কাস্টম চার্ট তৈরি করার প্রাথমিক পদক্ষেপ

প্রথমে, Highcharts লাইব্রেরি আপনার Angular প্রজেক্টে অন্তর্ভুক্ত করতে হবে। তারপর, আপনি প্রয়োজনীয় কাস্টম চার্ট তৈরি করতে পারেন।

• Highcharts লাইব্রেরি ইন্সটল করা:

  npm install highcharts --save
  npm install highcharts-angular --save
  

• AppModule তে Highcharts ইমপোর্ট করা:

  import { HighchartsChartModule } from 'highcharts-angular';
  

  তারপর imports এ HighchartsChartModule যোগ করুন।

  imports: [
    HighchartsChartModule
  ]
  

2. কাস্টম চার্টের জন্য chartOptions কনফিগারেশন তৈরি করা

Highcharts এ চার্ট তৈরি করতে chartOptions কনফিগারেশন ব্যবহার করা হয়। এটি একটি অবজেক্ট যা চার্টের সমস্ত কনফিগারেশন এবং কাস্টমাইজেশন ধারণ করে।

এখানে একটি কাস্টম Line Chart তৈরির উদাহরণ দেয়া হলো, যার মধ্যে ডেটা, সিরিজ, টুলটিপ, লেজেন্ড, এবং অ্যাক্সিস কাস্টমাইজ করা হয়েছে:

import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';

@Component({
  selector: 'app-chart',
  templateUrl: './chart.component.html',
  styleUrls: ['./chart.component.css']
})
export class ChartComponent {
  Highcharts = Highcharts;
  chartOptions = {
    chart: {
      type: 'line'  // Line Chart তৈরি করা
    },
    title: {
      text: 'Custom Line Chart'  // চার্টের শিরোনাম
    },
    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],  // xAxis ক্যাটেগরি
      title: {
        text: 'Months'  // xAxis শিরোনাম
      }
    },
    yAxis: {
      title: {
        text: 'Values'  // yAxis শিরোনাম
      },
      min: 0,  // yAxis এর মিনিমাম মান
      max: 10,  // yAxis এর ম্যাক্সিমাম মান
      tickInterval: 2  // yAxis এর টিকের দূরত্ব
    },
    series: [{
      name: 'Data Series',
      data: [1, 3, 2, 4, 6, 7],  // সিরিজের ডেটা
      color: '#FF5733',  // সিরিজের রঙ
      lineWidth: 3  // লাইনটির প্রস্থ
    }]
  };
}

এই কোডে একটি Line Chart তৈরি করা হয়েছে যার মধ্যে:

• xAxis তে মাসগুলো (Jan, Feb, Mar) দেখানো হচ্ছে।
• yAxis তে মানের রেঞ্জ (0 থেকে 10) নির্ধারণ করা হয়েছে।
• সিরিজের রঙ #FF5733 এবং lineWidth ৩ সেট করা হয়েছে।

3. কাস্টম চার্টের জন্য টেমপ্লেট তৈরি করা

chart.component.html এ Highcharts কম্পোনেন্ট ব্যবহার করে চার্ট রেন্ডার করা হয়:

<div style="width: 100%; height: 400px;">
  <highcharts-chart 
    [Highcharts]="Highcharts"
    [options]="chartOptions">
  </highcharts-chart>
</div>

এটি Angular কম্পোনেন্টের মধ্যে Highcharts চার্ট রেন্ডার করবে।

4. কাস্টম চার্টে আরও কাস্টমাইজেশন

Highcharts এর মাধ্যমে আপনি চার্টের আরও অনেক উপাদান কাস্টমাইজ করতে পারেন। নিচে কিছু উদাহরণ দেওয়া হলো:

• টুলটিপ কাস্টমাইজ করা:

  tooltip: {
    backgroundColor: '#FFFF00',  // টুলটিপ ব্যাকগ্রাউন্ড রঙ
    borderWidth: 2,  // টুলটিপের বর্ডার প্রস্থ
    formatter: function() {
      return 'Month: ' + this.x + '<br>Value: ' + this.y;
    }
  }
  

• লেজেন্ড কাস্টমাইজ করা:

  legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'top',
    itemStyle: {
      fontSize: '12px',
      fontWeight: 'bold'
    }
  }
  

• সিরিজের রঙ এবং স্টাইল কাস্টমাইজ করা:

  series: [{
    name: 'Data Series',
    data: [1, 3, 2, 4, 6, 7],
    color: '#008000',  // সিরিজের রঙ
    lineWidth: 4,  // লাইন প্রস্থ
    marker: {
      symbol: 'circle',  // মার্কারের আকার
      radius: 4  // মার্কারের রেডিয়াস
    }
  }]
  

• Grid Lines কাস্টমাইজ করা:

  xAxis: {
    gridLineWidth: 2,  // xAxis গ্রিড লাইন এর প্রস্থ
    gridLineColor: '#CCCCCC'  // xAxis গ্রিড লাইন এর রঙ
  },
  yAxis: {
    gridLineWidth: 2,  // yAxis গ্রিড লাইন এর প্রস্থ
    gridLineColor: '#CCCCCC'  // yAxis গ্রিড লাইন এর রঙ
  }
  

5. কাস্টম চার্টের জন্য অন্যান্য ফিচার

Highcharts আরো অনেক কাস্টম ফিচার প্রদান করে যা আপনি আপনার চার্টে প্রয়োগ করতে পারেন:

• Zoom এবং Panning:

  আপনি চার্টে zoom এবং panning ফিচার যুক্ত করতে পারেন।

  chart: {
    zoomType: 'xy'  // x এবং y উভয় অ্যাক্সিসে জুম
  }
  

• Drilldown চার্ট:

  Highcharts এর Drilldown ফিচার ব্যবহার করে আপনি একটি চার্টের উপাদানে ক্লিক করলে আরও বিস্তারিত ডেটা প্রদর্শন করতে পারেন।

  drilldown: {
    series: [{
      id: 'data-series-1',
      data: [2, 4, 6, 8]
    }]
  }
  

সারাংশ

Highcharts এ কাস্টম চার্ট তৈরি করতে chartOptions অবজেক্টের মাধ্যমে বিভিন্ন কনফিগারেশন করা হয়। আপনি xAxis, yAxis, series, tooltip, legend ইত্যাদি কাস্টমাইজ করতে পারেন। এছাড়া আপনি Zoom, Drilldown, Panning সহ আরও অনেক ফিচার ব্যবহার করে চার্টকে আরও ইন্টারঅ্যাকটিভ এবং ব্যবহারকারী-বান্ধব করতে পারেন। Highcharts এর সাহায্যে আপনি আপনার প্রয়োজন অনুযায়ী একটি কাস্টম চার্ট তৈরি করতে পারেন, যা ডেটা ভিজ্যুয়ালাইজেশনকে আরও কার্যকর এবং আকর্ষণীয় করে তোলে।

Highcharts একটি অত্যন্ত ফ্লেক্সিবল লাইব্রেরি যা আপনাকে আপনার প্রয়োজন অনুযায়ী কাস্টম চার্ট ডিজাইন করতে সহায়তা করে। আপনি Highcharts এর মাধ্যমে বিভিন্ন ধরনের স্টাইলিং, টেমপ্লেট ডিজাইন, এবং ইন্টারঅ্যাকটিভ ফিচার যোগ করতে পারেন, যা আপনার চার্টকে আরও আকর্ষণীয় এবং ব্যবহারকারীর জন্য উপযোগী করে তোলে।

এখানে Highcharts এর কাস্টম চার্ট ডিজাইন করার কিছু পদ্ধতি আলোচনা করা হলো, যা আপনি বিভিন্ন প্রয়োজনে ব্যবহার করতে পারবেন।

1. কাস্টম চার্ট টাইপ ডিজাইন

Highcharts বিভিন্ন ধরনের চার্ট তৈরি করতে সহায়তা করে যেমন লাইন, বার, পাই, কোলাম ইত্যাদি। আপনি এই চার্ট টাইপগুলো কাস্টমাইজ করতে পারেন বিভিন্ন স্টাইল এবং অপশন দিয়ে।

• কাস্টম চার্ট টাইপ:

  Highcharts.chart('container', {
    chart: {
      type: 'column' // কাস্টম চার্ট টাইপ
    },
    title: {
      text: 'Custom Column Chart'
    },
    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']
    },
    yAxis: {
      title: {
        text: 'Sales'
      }
    },
    series: [{
      name: 'Sales',
      data: [5, 6, 4, 7, 3, 5, 8],
      color: '#FF5733' // কাস্টম সিরিজ রঙ
    }]
  });
  

এখানে, আমরা একটি কাস্টম কলাম চার্ট তৈরি করেছি এবং সিরিজের রঙ কাস্টমাইজ করেছি।

2. কাস্টম টেমপ্লেট ডিজাইন

Highcharts এর মাধ্যমে আপনি আপনার চার্টের লেআউট এবং ডিজাইন পুরোপুরি কাস্টমাইজ করতে পারেন। আপনি চার্টের উপাদানগুলোর (যেমন লেজেন্ড, টুলটিপ, এক্সিস) অবস্থান এবং স্টাইল পরিবর্তন করতে পারেন।

• কাস্টম টেমপ্লেট ডিজাইন:

  Highcharts.chart('container', {
    chart: {
      type: 'line',
      backgroundColor: '#f4f4f4', // কাস্টম ব্যাকগ্রাউন্ড কালার
      borderRadius: 10, // চার্টের কোণ সোজা বা গোলাকার করা
      borderWidth: 2, // চার্টের বর্ডার প্রস্থ
    },
    title: {
      text: 'Custom Template Chart',
      style: {
        color: '#333', // শিরোনামের রঙ
        fontSize: '20px' // শিরোনামের ফন্ট সাইজ
      }
    },
    subtitle: {
      text: 'Subtitle Example',
      style: {
        color: '#666',
        fontSize: '16px'
      }
    },
    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
      title: {
        text: 'Months',
        style: {
          color: '#333',
          fontSize: '14px'
        }
      },
      lineColor: '#ccc', // এক্স-অ্যাক্সিসের লাইনের রঙ
      lineWidth: 2
    },
    yAxis: {
      title: {
        text: 'Amount',
        style: {
          color: '#333',
          fontSize: '14px'
        }
      },
      gridLineColor: '#ddd', // গ্রিড লাইন রঙ
    },
    series: [{
      name: 'Sales',
      data: [10, 20, 30, 40, 50],
      color: '#5c92d1' // সিরিজের রঙ
    }]
  });
  

এখানে, চার্টের ব্যাকগ্রাউন্ড, শিরোনাম, এক্সিস শিরোনাম, এবং সিরিজের রঙ কাস্টমাইজ করা হয়েছে।

3. কাস্টম রেন্ডারিং লজিক

Highcharts এ আপনি কাস্টম রেন্ডারিং লজিক যোগ করতে পারেন, যেমন চার্টের উপাদানগুলোর কাস্টম ডিজাইন বা স্টাইলিং এর জন্য বিভিন্ন কাস্টম জাভাস্ক্রিপ্ট ফাংশন ব্যবহার করা।

• কাস্টম পয়েন্ট রেন্ডারিং:

  Highcharts.chart('container', {
    chart: {
      type: 'scatter'
    },
    title: {
      text: 'Custom Point Rendering'
    },
    xAxis: {
      categories: ['A', 'B', 'C', 'D']
    },
    series: [{
      data: [
        { x: 0, y: 10, name: 'Point 1' },
        { x: 1, y: 12, name: 'Point 2' },
        { x: 2, y: 8, name: 'Point 3' }
      ],
      marker: {
        symbol: 'circle', // পয়েন্টের আকার কাস্টমাইজ করা
        radius: 10, // পয়েন্টের আকার
        fillColor: '#FF0000' // পয়েন্টের রঙ
      },
      dataLabels: {
        enabled: true,
        format: '{point.name}', // পয়েন্টের নাম প্রদর্শন
        style: {
          color: '#000000', // ডেটা লেবেলের রঙ
          fontSize: '14px'
        }
      }
    }]
  });
  

এখানে, আমরা scatter টাইপের চার্টে কাস্টম পয়েন্ট রেন্ডারিং যোগ করেছি, যেখানে পয়েন্টের আকার এবং রঙ কাস্টমাইজ করা হয়েছে।

4. কাস্টম টুলটিপ ডিজাইন

Highcharts এর টুলটিপ ব্যবহারকারীর জন্য তথ্য প্রদর্শন করার একটি উপায়। আপনি টুলটিপের কনটেন্ট, স্টাইল, এবং ফরম্যাট কাস্টমাইজ করতে পারেন।

• কাস্টম টুলটিপ:

  Highcharts.chart('container', {
    chart: {
      type: 'line'
    },
    title: {
      text: 'Custom Tooltip Example'
    },
    tooltip: {
      backgroundColor: '#ffeb3b',
      borderColor: '#FF9800',
      borderRadius: 10,
      formatter: function () {
        return '<b>' + this.series.name + '</b><br>' +
               'Value: ' + this.y + '<br>' +
               'Category: ' + this.x;
      }
    },
    series: [{
      name: 'Sales',
      data: [10, 20, 30, 40, 50],
      color: '#FF5733'
    }]
  });
  

এখানে, আমরা tooltip.formatter ব্যবহার করে কাস্টম টুলটিপ কনটেন্ট তৈরি করেছি, যা সিরিজের নাম, মান এবং ক্যাটেগরি প্রদর্শন করবে।

5. কাস্টম প্লট স্টাইল এবং সিরিজ টাইপ

Highcharts এর বিভিন্ন সিরিজ টাইপ যেমন line, column, scatter ইত্যাদি কাস্টমাইজ করা যায়। আপনি এই সিরিজগুলোতে বিভিন্ন স্টাইল বা প্যাটার্ন যোগ করতে পারেন।

• কাস্টম প্লট স্টাইল:

  Highcharts.chart('container', {
    chart: {
      type: 'area'
    },
    title: {
      text: 'Custom Plot Style'
    },
    series: [{
      name: 'Revenue',
      data: [5, 10, 15, 20, 25],
      fillColor: 'rgba(0, 123, 255, 0.3)', // প্লটের রঙ কাস্টমাইজ
      lineWidth: 3,
      lineColor: '#007bff'
    }]
  });
  

এখানে, fillColor এবং lineWidth দিয়ে প্লটের রঙ এবং সীমানা কাস্টমাইজ করা হয়েছে।

সারাংশ

Highcharts আপনাকে কাস্টম চার্ট ডিজাইন করার জন্য অসংখ্য উপায় প্রদান করে। আপনি চার্ট টাইপ, টেমপ্লেট ডিজাইন, কাস্টম রেন্ডারিং লজিক, টুলটিপ, পয়েন্ট রেন্ডারিং, এবং সিরিজ স্টাইলিং কাস্টমাইজ করতে পারবেন। এগুলো ব্যবহার করে আপনি আপনার চার্টের ভিজ্যুয়াল এবং ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করতে পারেন। Highcharts এর এই কাস্টমাইজেশন বৈশিষ্ট্যগুলি আপনাকে সম্পূর্ণভাবে আপনার প্রয়োজনীয় ডিজাইন তৈরি করতে সহায়ক হবে।

Highcharts এ কাস্টম রেন্ডারিং লজিক যুক্ত করা একটি শক্তিশালী বৈশিষ্ট্য, যা আপনাকে চার্টের উপাদানগুলোর রেন্ডারিং কাস্টমাইজ করতে সহায়তা করে। এর মাধ্যমে আপনি বিভিন্ন ডেটা পয়েন্ট, সিরিজ, বা লেবেলগুলি কাস্টম ভাবে রেন্ডার করতে পারেন। কাস্টম রেন্ডারিং লজিক ব্যবহার করে আপনি আপনার চার্টকে আরও দৃষ্টিনন্দন এবং ইন্টারঅ্যাকটিভ করতে পারবেন।

Highcharts এ কাস্টম রেন্ডারিং লজিক মূলত renderer ব্যবহার করে সম্পাদন করা হয়, যা SVG বা Canvas এর মাধ্যমে কাস্টম গ্রাফিক্স তৈরি করতে সাহায্য করে।

1. Highcharts এ কাস্টম ড্রয়িং (Custom Drawing) - renderer ব্যবহার করা

Highcharts এর renderer ব্যবহার করে আপনি নিজের কাস্টম গ্রাফিক্স বা চিত্র তৈরি করতে পারেন, যেমন লাইন, সার্কেল, রেকট্যাঙ্গল, টেক্সট ইত্যাদি।

উদাহরণ: কাস্টম সার্কেল এবং টেক্সট রেন্ডারিং

import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';

@Component({
  selector: 'app-chart',
  templateUrl: './chart.component.html',
  styleUrls: ['./chart.component.css']
})
export class ChartComponent {
  Highcharts = Highcharts;
  chartOptions = {
    chart: {
      type: 'line',
      events: {
        load: function () {
          const chart = this;

          // Custom circle rendering using renderer
          chart.renderer.circle(100, 100, 50)  // x, y, radius
            .attr({
              fill: '#FF5733',
              stroke: '#C70039',
              'stroke-width': 4
            })
            .add();

          // Custom text rendering
          chart.renderer.text('Custom Text', 100, 100)
            .css({
              color: 'blue',
              fontSize: '20px'
            })
            .add();
        }
      }
    },
    title: {
      text: 'Custom Rendering Example'
    },
    series: [{
      name: 'Sales',
      data: [1, 3, 2, 4, 5, 6]
    }]
  };
}

এখানে, chart.renderer.circle() এবং chart.renderer.text() ব্যবহার করে আমরা একটি কাস্টম সার্কেল এবং টেক্সট রেন্ডার করেছি।

• circle() পদ্ধতিটি একটি সার্কেল রেন্ডার করে, যেখানে আপনি তার x, y পজিশন এবং radius নির্ধারণ করতে পারেন।
• text() পদ্ধতিটি চার্টে কাস্টম টেক্সট যোগ করতে ব্যবহৃত হয়, যেখানে টেক্সটের পজিশন এবং CSS স্টাইল কাস্টমাইজ করা যেতে পারে।

2. ডেটা পয়েন্ট বা সিরিজের কাস্টম রেন্ডারিং

আপনি যদি সিরিজের ডেটা পয়েন্টে কাস্টম রেন্ডারিং করতে চান, তবে Highcharts এর point এবং series ইভেন্টের মাধ্যমে কাস্টম রেন্ডারিং যুক্ত করতে পারেন। এর মাধ্যমে আপনি সিরিজের পয়েন্টের আকার, রঙ, বা পজিশন কাস্টমাইজ করতে পারবেন।

উদাহরণ: কাস্টম পয়েন্ট স্টাইলিং

Highcharts.chart('container', {
  chart: {
    type: 'scatter'
  },
  title: {
    text: 'Custom Point Rendering'
  },
  plotOptions: {
    scatter: {
      marker: {
        radius: 10, // Default size of markers
        symbol: 'circle' // Default shape
      },
      events: {
        mouseOver: function() {
          // Change point style on hover
          this.graphic.attr({
            fill: '#FF5733',  // On hover color change
            r: 15  // Increase the radius on hover
          });
        },
        mouseOut: function() {
          // Revert point style when mouse out
          this.graphic.attr({
            fill: '#00FF00',  // Revert to original color
            r: 10  // Revert to original size
          });
        }
      }
    }
  },
  series: [{
    name: 'Series 1',
    data: [[1, 2], [3, 4], [5, 6], [7, 8]]
  }]
});

এখানে, mouseOver এবং mouseOut ইভেন্ট ব্যবহার করে আমরা কাস্টম পয়েন্ট রেন্ডারিং করেছি। যখন মাউস পয়েন্টের উপর আসে, তখন তার রঙ এবং আকার পরিবর্তন হয়।

3. ডাইনামিক ডেটা রেন্ডারিং (Dynamic Data Rendering)

Highcharts এর renderer আপনাকে ডাইনামিকভাবে ডেটার উপস্থাপনাকে কাস্টমাইজ করার সুবিধা দেয়। আপনি ডেটা সিরিজের উপর ভিত্তি করে কাস্টম গ্রাফিক্স তৈরি করতে পারেন।

উদাহরণ: ডাইনামিক ডেটা রেন্ডারিং

Highcharts.chart('container', {
  chart: {
    type: 'line',
    events: {
      load: function () {
        const chart = this;
        const series = chart.series[0];
        
        series.points.forEach(function (point) {
          // Custom rendering for each point in the series
          chart.renderer.rect(point.plotX - 5, point.plotY - 5, 10, 10)
            .attr({
              fill: 'rgba(255, 99, 132, 0.6)',
              stroke: '#FF0000',
              'stroke-width': 2
            })
            .add();
        });
      }
    }
  },
  title: {
    text: 'Dynamic Data Rendering Example'
  },
  series: [{
    name: 'Sales',
    data: [1, 3, 2, 4, 5, 6]
  }]
});

এখানে, আমরা series.points এর প্রতিটি পয়েন্টে কাস্টম রেন্ডারিং যোগ করেছি, যেখানে প্রতিটি পয়েন্টের জন্য একটি কাস্টম রেকট্যাঙ্গেল রেন্ডার হয়েছে।

4. কাস্টম গ্রাফিক্স অ্যাড করা

আপনি renderer ব্যবহার করে কাস্টম গ্রাফিক্স বা চিত্র (যেমন, ছবি বা আকার) চার্টে যুক্ত করতে পারেন।

উদাহরণ: কাস্টম গ্রাফিক্স অ্যাড করা

Highcharts.chart('container', {
  chart: {
    type: 'line',
    events: {
      load: function () {
        const chart = this;
        
        // Adding a custom image to the chart
        chart.renderer.image('https://www.example.com/custom-image.png', 100, 100, 50, 50)
          .add();
      }
    }
  },
  title: {
    text: 'Custom Image Example'
  },
  series: [{
    name: 'Sales',
    data: [1, 3, 2, 4, 5, 6]
  }]
});

এখানে, আমরা renderer.image() ব্যবহার করে একটি কাস্টম ইমেজ চার্টে যোগ করেছি।

সারাংশ

Highcharts এ কাস্টম রেন্ডারিং লজিক যুক্ত করে আপনি চার্টের উপাদানগুলি কাস্টমাইজ এবং উন্নত করতে পারেন। renderer ব্যবহার করে আপনি কাস্টম গ্রাফিক্স, লাইন, টেক্সট, ছবি, পয়েন্ট স্টাইলিং ইত্যাদি কাস্টমাইজ করতে পারেন। এটি আপনাকে আরও ভিজ্যুয়ালি আকর্ষণীয় এবং ইন্টারঅ্যাকটিভ চার্ট তৈরি করতে সহায়তা করবে। Highcharts এর এই কাস্টমাইজেশন ক্ষমতা চার্টগুলোকে আরও ব্যক্তিগতকৃত এবং ব্যবহারকারীর জন্য উপযোগী করে তোলে।

Highcharts এ চার্টের স্টাইল পরিবর্তন করা খুবই সহজ এবং আপনি যেকোনো সময় ডায়নামিকভাবে এটি করতে পারেন। Highcharts এর মাধ্যমে আপনি রUNTIME এ চার্টের রং, ফন্ট, লাইনের স্টাইল, ব্যাকগ্রাউন্ড, টুলটিপ, সিরিজের ডেটা এবং আরও অনেক কিছু পরিবর্তন করতে পারেন। এখানে আমরা দেখব কিভাবে Highcharts এ ডায়নামিক স্টাইল পরিবর্তন করা যায়।

1. চার্টের স্টাইল পরিবর্তন (CSS এর মাধ্যমে)

Highcharts আপনাকে CSS এর মাধ্যমে চার্টের কিছু অংশ যেমন ব্যাকগ্রাউন্ড, লেজেন্ড, টুলটিপ, এক্সিস ইত্যাদি কাস্টমাইজ করার সুযোগ দেয়। আপনি chart, legend, tooltip, xAxis, yAxis এর মতো অংশের স্টাইল CSS দিয়ে পরিবর্তন করতে পারেন।

উদাহরণ: CSS দিয়ে চার্টের স্টাইল পরিবর্তন

.highcharts-background {
  fill: #f0f0f0; /* ব্যাকগ্রাউন্ড রঙ পরিবর্তন */
}

.highcharts-legend {
  font-size: 14px; /* লেজেন্ডের ফন্ট সাইজ পরিবর্তন */
  color: #333333; /* লেজেন্ডের টেক্সট রঙ */
}

এটি আপনার HTML বা CSS ফাইলের মধ্যে যুক্ত করতে হবে, এবং এটি চার্টের স্টাইল পরিবর্তন করবে।

2. JavaScript এর মাধ্যমে ডায়নামিক স্টাইল পরিবর্তন

Highcharts এ JavaScript ব্যবহার করে রUNTIME এ বিভিন্ন স্টাইল পরিবর্তন করা যায়। আপনি chart.update() ফাংশন ব্যবহার করে চার্টের বিভিন্ন অপশন ডায়নামিকভাবে পরিবর্তন করতে পারেন, যেমন সিরিজের রং, লাইন স্টাইল, এক্সিসের লেবেল ইত্যাদি।

উদাহরণ: সিরিজের রং ডায়নামিকভাবে পরিবর্তন করা

Highcharts.chart('container', {
  chart: {
    type: 'line'
  },
  title: {
    text: 'ডায়নামিক স্টাইল পরিবর্তন'
  },
  series: [{
    name: 'সেলস',
    data: [10, 20, 30, 40, 50]
  }]
});

// সিরিজের রং পরিবর্তন করা
setTimeout(() => {
  var chart = Highcharts.chart('container');
  chart.series[0].update({
    color: '#FF5733'  // নতুন রং
  });
}, 2000);

এখানে, প্রথমে একটি চার্ট তৈরি করা হয়েছে এবং পরে 2 সেকেন্ড পর সিরিজের রং পরিবর্তন করা হয়েছে। chart.series[0].update() ফাংশনের মাধ্যমে সিরিজের রং পরিবর্তন করা হয়।

3. সিরিজের লাইন স্টাইল পরিবর্তন

Highcharts এ আপনি সিরিজের লাইন স্টাইল পরিবর্তন করতে পারেন, যেমন লাইনটি সলিড, ড্যাশড বা ডটেড করা।

উদাহরণ: সিরিজের লাইন স্টাইল পরিবর্তন করা

Highcharts.chart('container', {
  chart: {
    type: 'line'
  },
  title: {
    text: 'লাইনের স্টাইল পরিবর্তন'
  },
  series: [{
    name: '2024 সেলস',
    data: [10, 20, 30, 40, 50],
    lineWidth: 3 // সলিড লাইন
  }]
});

// লাইনের স্টাইল পরিবর্তন করা
setTimeout(() => {
  var chart = Highcharts.chart('container');
  chart.series[0].update({
    lineWidth: 5,  // লাইন প্রস্থ বাড়ানো
    dashStyle: 'shortdash'  // ড্যাশ স্টাইল
  });
}, 2000);

এখানে, প্রথমে একটি সলিড লাইন ব্যবহার করা হয়েছে এবং পরে ড্যাশ স্টাইল এবং লাইন প্রস্থ পরিবর্তন করা হয়েছে।

4. এক্সিস লেবেল এবং টুলটিপ স্টাইল পরিবর্তন

Highcharts এ আপনি এক্সিস লেবেল এবং টুলটিপের স্টাইলও ডায়নামিকভাবে পরিবর্তন করতে পারেন।

উদাহরণ: এক্সিস লেবেল এবং টুলটিপের স্টাইল পরিবর্তন করা

Highcharts.chart('container', {
  chart: {
    type: 'line'
  },
  title: {
    text: 'এক্সিস এবং টুলটিপ স্টাইল পরিবর্তন'
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
    labels: {
      style: {
        color: '#FF5733', // এক্সিস লেবেলের রং পরিবর্তন
        fontSize: '14px'  // এক্সিস লেবেলের ফন্ট সাইজ
      }
    }
  },
  tooltip: {
    backgroundColor: '#FFFFFF', // টুলটিপের ব্যাকগ্রাউন্ড রং
    borderColor: '#FF5733',  // টুলটিপের বর্ডার রং
    style: {
      color: '#000000', // টুলটিপের টেক্সট রং
      fontSize: '16px' // টুলটিপের ফন্ট সাইজ
    }
  },
  series: [{
    name: 'সেলস',
    data: [10, 20, 30, 40, 50]
  }]
});

এখানে xAxis এবং tooltip এর স্টাইল পরিবর্তন করা হয়েছে, যেমন টেক্সটের রং, ফন্ট সাইজ এবং ব্যাকগ্রাউন্ড রঙ পরিবর্তন করা হয়েছে।

5. এনিমেশন এবং ট্রানজিশন স্টাইল পরিবর্তন

Highcharts এর মাধ্যমে আপনি চার্টে এনিমেশন এবং ট্রানজিশন যোগ করতে পারেন, যা চার্টের রেন্ডারিংকে আরও প্রাণবন্ত এবং ইন্টারঅ্যাকটিভ করে তোলে।

উদাহরণ: সিরিজের ডেটার এনিমেশন স্টাইল পরিবর্তন

Highcharts.chart('container', {
  chart: {
    type: 'line',
    animation: {
      duration: 1000,  // এনিমেশনটির সময়কাল
      easing: 'easeOutBounce'  // এনিমেশন ইফেক্ট
    }
  },
  title: {
    text: 'এনিমেশন স্টাইল পরিবর্তন'
  },
  series: [{
    name: '2024 সেলস',
    data: [10, 20, 30, 40, 50]
  }]
});

এখানে, animation অপশন দিয়ে এনিমেশন ডিউরেশন এবং easing স্টাইল কাস্টমাইজ করা হয়েছে।

সারাংশ

Highcharts এ ডায়নামিক স্টাইল পরিবর্তন অনেক সহজ এবং কার্যকর। আপনি JavaScript এবং CSS এর মাধ্যমে চার্টের বিভিন্ন অংশের স্টাইল কাস্টমাইজ করতে পারেন, যেমন সিরিজের রং, লাইনের স্টাইল, এক্সিসের লেবেল, টুলটিপের কনটেন্ট এবং এনিমেশন ইফেক্ট। এই কাস্টমাইজেশনগুলি আপনাকে আপনার অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং ইউজার-বান্ধব করতে সাহায্য করবে।